<template>
  <footer class="footer" :class="{'go-back': !showNav}">
	<div class="footer line"></div>>

  	<section class="footer mint-1px-t" v-show="showNav">
	  	<nav class="nav" :class="{'cur-page': route === '/'}">
	  		<router-link to="/">
	  			<div v-show="route !== '/'" class="nav-icon">
	  				<img  src="../asset/images/tab_index.png" alt="">
					<p class="nav-title">首页</p>
	  			</div>
				<div v-show="route === '/'" class="nav-icon">
	  				<img src="../asset/images/tab_index_sel.png" alt="">
					<p class="nav-title-sel">首页</p>
	  			</div>
	  		</router-link>
	  	</nav>
	  	<nav class="nav" :class="{'cur-page': route === '/class'}">
			<router-link to="class">
				<div v-show="route !== '/class'" class="nav-icon">
	  				<img src="../asset/images/tab_class.png" alt="">
					<p class="nav-title">课程</p>
	  			</div>
				<div v-show="route === '/class'" class="nav-icon">
	  				<img src="../asset/images/tab_class_sel.png" alt="">
					<p class="nav-title-sel">课程</p>
	  			</div>
			</router-link>
	  	</nav>
		<nav class="nav" :class="{'cur-page': route === '/classpub'}" >
			<router-link to="classpub">
				<div v-show="route !== '/classpub'" class="nav-icon">
	  				<img src="../asset/images/tab_publish.png" alt="">
					<p class="nav-title">开课</p>
	  			</div>
				<div v-show="route === '/classpub'" class="nav-icon">
	  				<img src="../asset/images/tab_publish_sel.png" alt="">
					<p class="nav-title-sel">开课</p>
	  			</div>
			</router-link>
	  	</nav>
  	</section>
  </footer>
</template>
<script>

import { mapGetters } from 'vuex';

export default{
  props: {
  	'showNav': {
  		type: Boolean,
  		default: true
	}
  },
  computed: {
  	route () {
  		return this.$route.path
	  }
  },
  methods: {
  	
  }
}
</script>

<style>
.footer {
	background-color: #FFFFFF;
	position: fixed;
	width: 100%;
	bottom: 0rem;
	height: 46px;
	display: -webkit-box; 
	padding-top: 7px;
	box-sizing: border-box;
	z-index: 10000;
}
.footer line{
	width:100%;
	height:2px;
	color: #F25257;
}
.footer nav {
	-webkit-box-flex: 1;
	text-align: center;
	color: #F25257;
	height:2px;
}
.nav-icon {
	width: 19px;
	height: 19px;
	margin: 0 auto;
}
.nav-icon img {
	width: 100%;
	height: 100%;
}
.nav-title{
    /* padding-top: 0; */
	text-align: center;
	display: inline-block;
	font-size: 9px;
	color: #000000;
	width:20px;
}
.nav-title-sel{
    /* padding-top: 0; */
	text-align: center;
	display: inline-block;
	font-size: 9px;
	color: #F25257;
	width:20px;
}
</style>
